<template>
  <div class="left-container">
    <section class="left-header">
      <section class="search">
        <Input
          type="text"
          icon='<svg t="1608010302477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3178"><path d="M798.386532 434.840666c0 90.322122-32.875059 173.048241-87.325366 236.740866 0 0 195.358181 195.621353 232.072842 231.577263 30.171373 29.522384-4.434167 75.370595-43.419638 33.901111-23.467419-24.980951-228.233239-225.844701-228.233239-225.844701-63.803709 54.933123-146.802359 88.132246-237.587665 88.132246-201.30588 0-364.492043-163.235758-364.492043-364.506784 0-201.271026 163.186162-364.477109 364.492043-364.477109C635.200369 70.363558 798.386532 233.56964 798.386532 434.840666zM433.893466 128.136356c-169.349788 0-306.69027 137.333832-306.69027 306.676681 0 169.398108 137.340482 306.732963 306.69027 306.732963 169.404026 0 306.744508-137.334855 306.744508-306.732963C740.637974 265.470187 603.297491 128.136356 433.893466 128.136356z" p-id="3179"></path></svg>'
          placeholder="搜索关键词"
          @onEnter="getSearchData"
          @onIconClick="getSearchData"
        />
        <span class="total">总计：{{ total }}</span>
      </section>
      <section class="orderBy" @click.stop="setOrderByOptionsHide()">
        <svg
          t="1608011654123"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3923"
        >
          <path
            d="M640 102.4H25.6c-14.336 0-25.6 11.264-25.6 25.6s11.264 25.6 25.6 25.6h614.4c14.336 0 25.6-11.264 25.6-25.6s-11.264-25.6-25.6-25.6zM640 486.4H25.6c-14.336 0-25.6 11.264-25.6 25.6s11.264 25.6 25.6 25.6h614.4c14.336 0 25.6-11.264 25.6-25.6s-11.264-25.6-25.6-25.6zM640 870.4H25.6c-14.336 0-25.6 11.264-25.6 25.6s11.264 25.6 25.6 25.6h614.4c14.336 0 25.6-11.264 25.6-25.6s-11.264-25.6-25.6-25.6zM855.04 102.4c-14.336 0-25.6 11.264-25.6 25.6v768c0 14.336 11.264 25.6 25.6 25.6s25.6-11.264 25.6-25.6V128c0-14.336-11.264-25.6-25.6-25.6z"
            fill=""
            p-id="3924"
          ></path>
          <path
            d="M1017.344 733.696c-10.24-10.24-26.112-10.24-36.352 0l-144.896 144.896c-10.24 10.24-10.24 26.112 0 36.352s26.112 10.24 36.352 0l144.896-144.896c9.728-10.24 9.728-26.112 0-36.352z"
            fill=""
            p-id="3925"
          ></path>
        </svg>
        <ul
          :class="{
            orderByOptions: true,
            orderByOptionsHide: isOrderByOptionsHide,
          }"
        >
          <li v-if="$parent.isTableShow" @click="timeSorting">
            {{ sortType ? "按时间倒序" : "按时间正序" }}
          </li>
          <li v-if="$parent.isTableShow" @click="nameSorting">按姓氏排序</li>
          <li v-if="!$parent.isTableShow" @click="toggleGroup">
            {{ groupToggleFlag ? "关闭分组" : "展开分组" }}
          </li>
        </ul>
      </section>
    </section>
    <p class="sgh-hr"></p>
    <section class="left-main" v-if="!$parent.isTableShow">
      <div v-for="(item, index) in myData" :key="index">
        <Exhibition
          :obj="item"
          @del="del"
          @update="update"
          @edit="edit"
          :flagID="flagID"
          :setFlagID="setFlagID"
          ref="ExC"
        />
      </div>
    </section>
    <section class="left-main-2" v-else>
      <Table :tData="myData" @del="del" @update="update" @edit="edit" />
    </section>
  </div>
</template>

<script>
import Input from "@/components/Input/index.vue";
import Exhibition from "@/components/Exhibition/index.vue";
import Table from "@/components/Table/index.vue";
import { debounce } from "@/utils/common.js";
import { getUsersUDparts, delUser, searchUsers } from "@/service/home.js";

export default {
  name: "Left",
  components: {
    Input,
    Exhibition,
    Table,
  },
  props: ["edit"],
  data() {
    return {
      isOrderByOptionsHide: true,
      total: 0,
      myData: [],
      keyword: ``,
      flagID: -1,
      groupToggleFlag: false,
      sortType: false,
    };
  },
  methods: {
    update() {
      this.$emit("update");
    },
    del(id) {
      if(confirm('确定要删除吗')){
        delUser.bind(this)(id);
      }
    },
    setOrderByOptionsHide() {
      this.isOrderByOptionsHide = !this.isOrderByOptionsHide;
    },
    setFlagID(id) {
      this.flagID = id;
    },
    // 按时间排序
    timeSorting() {
      if (this.sortType) {
        this.myData.sort((user1, user2) => {
          return this.moment(user2.ctime) - this.moment(user1.ctime);
        });
      } else {
        this.myData.sort((user1, user2) => {
          return this.moment(user1.ctime) - this.moment(user2.ctime);
        });
      }
      this.sortType = !this.sortType;
    },
    // 按名字排序
    nameSorting() {
      this.myData.sort((user1, user2) => {
        return user1.cn.localeCompare(user2.cn);
      });
    },
    // 展开关闭分组
    toggleGroup() {
      this.groupToggleFlag = !this.groupToggleFlag;
      for (let o of this.$refs["ExC"]) {
        o.toggle(this.groupToggleFlag);
      }
    },
    setData(dparts) {
      this.myData = dparts.data;
      this.total = dparts.count;
    },
    async getData(flag = false) {
      let dparts = await getUsersUDparts.bind(this)(flag);
      this.setData(dparts);
    },
    async getSearchData(keyword) {
      let dparts = await searchUsers.bind(this)(
        keyword,
        this.$parent.isTableShow
      );
      this.setData(dparts);
    },
  },
  created() {
    this.getData(this.$parent.isTableShow);
  },
};
</script>

<style lang="scss">
$font-color: #999;
$theme-green-color: #48aa4e;
$part-bg-color: #2d3838;
$border-gray-color: #474747;
.left-container {
  margin: 10px;
  .left-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .search {
      display: flex;
      align-items: center;
      .total {
        color: $font-color;
        margin-left: 10px;
        font-size: 12px;
      }
    }
    .orderBy {
      cursor: pointer;
      svg {
        height: 18px;
        width: 18px;
        path {
          fill: $font-color;
        }
      }
      &:hover {
        svg > path {
          fill: $theme-green-color;
        }
      }
    }
    .orderByOptions {
      color: $font-color;
      position: absolute;
      top: 30px;
      right: 0;
      list-style: none;
      padding: 5px 0;
      margin: 0;
      font-size: 8px;
      background-color: $part-bg-color;
      border-radius: 4px;
      box-shadow: 0 0 6px 0 rgba(#000, 0.5);
      li {
        padding: 5px 20px;
        &:hover {
          background-color: rgba(#fff, 0.1);
          cursor: pointer;
        }
      }
    }
    .orderByOptionsHide {
      display: none;
    }
  }
  .sgh-hr {
    height: 0.5px;
    background-color: $border-gray-color;
  }
  .left-main {
    height: 80vh;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }

    &::-webkit-scrollbar-track {
      border-radius: 0;
      background: $part-bg-color;
    }
  }
  .left-main-2 {
    height: 80vh;
  }
}
</style>